<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="" alt="" id="img">
    <input type="file" id="file">
</body>
<script>
    let file=document.getElementById('file')
    file.onchange=function(e){
        // 1.获取文件
        // 通过事件对象
        console.log('onchange',e.target.files[0])
        // 通过file.files
        console.log('onchange',file.files[0])
        // 通过this
        console.log('onchange',this.files[0])
        // 2.获取文件内容
        // 方式1-通过base-64
        let reader = new FileReader()
        let result = reader.readAsDataURL(this.files[0])
        reader.onload=function(){
            document.getElementById('img').src=this.result
        }
    }
</script>
</html>